<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: #6ff;
            margin: 50px;
        }
    </style>
</head>

<body>
    <!--  内联JS绑定事件 -->
    <!-- <div class="box" onclick="alert(11111)"></div> -->
    <div class="box"></div>
</body>
<script>
    // 给一个元素绑定事件的几种方式:
    // 1. 内联JS绑定事件  => 缺点:代码写在标签内,不清晰,维护成本高,代码无法复用
    // 2. DOM一级事件(赋值式) =>  缺点:无法给同一个元素绑定多个相同类型的事件(后写的会覆盖先写的)
    // 3. DOM二级事件(事件监听) =>W3C新增绑定事件的方式 => 可以给同一个元素绑定多个相同类型的事件

    // 添加事件监听
    // ele.addEventListener(type,callback,useCapture)
    // ele  绑定事件的元素
    // type 绑定事件的类型 (click dblclick mousedown)
    // callback  事件触发时执行的函数 (函数中的this->绑定事件的元素)
    // useCapture 是否在捕获阶段触发事件(默认:false)


    // DOM一级事件(赋值式)
    // var box = document.getElementsByClassName("box")[0];
    // box.onclick = function () {
    //     alert(11111);
    // }
    // box.onclick = function () {
    //     alert(22222);
    // }
    // console.log(box.onclick);.



    var box = document.getElementsByClassName("box")[0];

    box.addEventListener("click", function () {
        alert(11111);
    })

    box.addEventListener("click", function () {
        this.style.backgroundColor = randColor();
    })

    function randColor() {
        var str = "0123456789abcdef";
        var colorStr = "#";
        for (var i = 0; i < 6; i++) {
            var index = Math.floor(Math.random() * str.length);
            var char = str.charAt(index);
            colorStr += char;
        }
        return colorStr;
    }


</script>

</html>